<template>
  <div class="">
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="sub_time" label="发起时间" />
        <el-table-column prop="script_name" label="拼单剧本" />
        <el-table-column label="价格每人(元)" width="150" v-slot="{ row }">
          <span>￥{{ row.price }}</span>
        </el-table-column>
        <el-table-column prop="peopleNum" label="几人本" width="150" />
        <el-table-column prop="cate_name" label="拼单进度" v-slot="{ row }">
          <el-progress
            :percentage="(row.userCount / row.peopleNum) * 100"
            :status="
              (row.userCount / row.peopleNum) * 100 === 100
                ? 'success'
                : 'warning'
            "
          />
        </el-table-column>
      </el-table>
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        class="mt-4"
        :page-size="pageSize"
        @change="changePage"
        style="display: flex; justify-content: center"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reqSubscribeList } from "@/api/order/index";
import { ReqSubscribeList } from "@/api/order/model";
import { useRoute, useRouter } from "vue-router";
const $router = useRouter();
const page = ref<number>(1);
const pageSize = ref<number>(10);
const total = ref<number>(0);
const tableData = ref<ReqSubscribeList[]>([]);

// 分页
const changePage = (pageNum: number) => {
  page.value = pageNum;
  getSubscribeList();
};

// 获取拼单列表
const getSubscribeList = async () => {
  let result = await reqSubscribeList({
    page: page.value,
    pageSize: pageSize.value,
  });
  total.value = result.count;
  tableData.value = result.rows;
};
onMounted(() => {
  getSubscribeList();
});
</script>

<style scoped lang="scss"></style>
